<template>
  <div class="ict">
    <div class="zhezhao" v-if="isfalse">
      <div class="neirong">
        <div class="img">
          <img :src="myimg[i]" alt="" />
          <div>
            <p>￥{{ mykx.gg[i].jg }}</p>
            <p>库存{{ mykx.gg[i].kc }}</p>
          </div>
          <span @click="gb()">x</span>
        </div>
        <div v-if="mykx.gg.length != 0" class="gg">
          <p>规格</p>
          <ul>
            <li
              v-for="(item, index) in mykx.gg"
              @click="myi(item.id - 1)"
              :class="index == i ? 'active' : ''"
            >
              {{ item.name }}
            </li>
          </ul>
        </div>
        <div v-if="mykx.ys.length != 0" class="gg">
          <p>灯光</p>
          <ul>
            <li
              v-for="(item, index) in mykx.ys"
              @click="myys(item.id - 1)"
              :class="index == ysid ? 'active' : ''"
            >
              {{ item.name }}
            </li>
          </ul>
        </div>
        <div class="sl">
          <p>数量</p>
          <div>
            <span @click="res()">-</span>
            <span>{{ sl }}</span>
            <span @click="add()">+</span>
          </div>
        </div>
      </div>
    </div>
    <div v-if="ts" class="tishi">
      <i class="iconfont">&#xe615;</i>
      <p>加入购物车成功</p>
    </div>
    <div class="bot">
      <div class="icon">
        <router-link to="/home/index">
          <i class="iconfont">&#xe62e;</i>
          <p>首页</p>
        </router-link>
      </div>
      <div class="icon">
        <i class="iconfont" :class="sp[id-1].sc ? 'active' : ''">&#xe60c;</i>
        <p @click="shoucang(id)" :class="sp[id-1].sc ? 'active' : ''">收藏</p>
      </div>
      <p @click="gwc()">加入购物车</p>
      <p @click="gm()">立即购买</p>
    </div>
    <div class="type">
      <span class="iconfont" @click="goto()">&#xe779;</span>
      长源灯饰
    </div>
    <div class="myshop">
      <banner2></banner2>
    </div>
    <div class="xinxi">
      <p>{{ mysp.name }}</p>
      <div class="xl">
        <p>￥{{ mysp.jg }}</p>
        <span>￥{{ mysp.yj }}</span>
        <span>销量 {{ mysp.ys }}件</span>
        <div class="i">
          <i class="iconfont">&#xe8b0;</i>
          <p>分享</p>
        </div>
      </div>
      <div class="baozhang">
        <i class="iconfont">&#xe60d;</i>
        <span>正品保障</span>
        <i class="iconfont">&#xe60d;</i>
        <span>破损包赔</span>
      </div>
    </div>
    <div class="guige" @click="xx()">
      <p>选择</p>
      <span>规格</span>
      <i class="iconfont"> &#xe775;</i>
    </div>
    <div class="xiangqing">
      <p>商品详情</p>
      <img v-for="item in myimg" :src="item" alt="" />
    </div>
    <div class="tuijian">
      <p>—— 相关推荐 ——</p>
      <div class="shangpin">
        <div class="box" v-for="item in mytj">
          <router-link
            :to="{ path: '/home/commodity', query: { id: item.id } }"
          >
            <div class="img">
              <img :src="item.img" alt="" />
            </div>
            <p>{{ item.name }}</p>
            <div class="ys">
              <span>￥{{ item.jg }}</span
              ><span>已售{{ item.ys }}件</span>
            </div>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.ict {
  background-color: rgb(237, 237, 241);
  margin-bottom: 60px;
  width: 100%;
  overflow: hidden;
  .tishi {
    position: fixed;
    width: 40%;
    background-color: black;
    top: 40%;
    left: 30%;
    z-index: 999999;
    text-align: center;
    i {
      color: white;
      font-size: 40px;
      line-height: 60px;
    }
    p {
      padding-bottom: 15px;
      color: white;
      font-size: 14px;
    }
  }
  .zhezhao {
    height: 100%;
    width: 100%;
    position: fixed;
    background-color: rgba(100, 100, 100, 0.4);
    z-index: 99999;
    .neirong {
      margin-top: 60%;
      height: 100%;
      background-color: white;
      .img {
        display: flex;
        position: relative;
        border-bottom: 1px solid #ccc;
        img {
          width: 110px;
          position: absolute;
          height: 110px;
          left: 15px;
          top: -50px;
          border: 5px solid white;
        }
        div {
          margin-left: 150px;
          margin-top: 5px;
          height: 70px;
          p {
            font-size: 14px;
            margin-top: 10px;
            color: red;
          }
          p:nth-child(2) {
            color: rgb(75, 75, 75);
            font-size: 12px;
          }
        }
        span {
          position: absolute;
          right: 20px;
          font-size: 25px;
          text-align: center;
          height: 30px;
          width: 30px;
          top: 15px;
          color: rgb(211, 211, 211);
        }
      }
      .gg {
        padding: 0 15px;
        border-bottom: 1px solid rgb(228, 228, 228);
        p {
          font-size: 15px;
          line-height: 35px;
          color: rgb(112, 112, 112);
        }
        ul {
          display: flex;
          flex-wrap: wrap;
          li {
            background-color: rgb(226, 226, 226);
            padding: 10px;
            margin: 0 10px 10px 0;
            border-radius: 5px;
            color: rgb(112, 112, 112);
            font-size: 14px;
          }
          .active {
            background-color: red;
            color: white;
          }
        }
      }
      .sl {
        margin: 15px 0 0 15px;
        display: flex;
        position: relative;
        p {
          font-size: 15px;
          color: rgb(112, 112, 112);
          line-height: 25px;
        }
        div {
          position: absolute;
          right: 20px;
          display: flex;
          top: -3px;
          span {
            display: block;
            font-size: 14px;
            background-color: rgb(233, 233, 233);
            padding: 10px 12px;
            margin-right: 3px;
            color: rgb(112, 112, 112);
          }
          span:nth-child(2) {
            padding: 10px 16px;
          }
        }
      }
    }
  }
  .bot {
    position: fixed;
    bottom: 0;
    z-index: 99999;
    display: flex;
    height: 60px;
    box-sizing: border-box;
    background-color: white;
    width: 100%;
    .icon {
      width: 15%;
      text-align: center;
      line-height: 15px;
      padding-top: 10px;
      border-left: 1px solid #ccc;
      i {
        font-size: 20px;
        color: rgb(116, 116, 116);
      }
      p {
        padding-top: 5px;
        font-size: 14px;
        color: rgb(116, 116, 116);
      }
      .active {
        color: red;
      }
    }
    .icon:nth-of-type(1) {
      border-left: none;
    }
    > p {
      width: 35%;
      font-size: 16px;
      background-color: rgb(243, 152, 0);
      line-height: 60px;
      text-align: center;
      color: white;
    }
    > p:nth-of-type(2) {
      background-color: red;
    }
  }
  .type {
    text-align: center;
    line-height: 50px;
    font-size: 16px;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 99999;
    border-bottom: 1px solid #ccc;
    font-weight: bold;
    color: rgb(116, 116, 116);
    text-align: center;
    background-color: white;
    span {
      position: absolute;
      display: block;
      height: 50px;
      width: 40px;
    }
  }
  .myshop {
    margin-top: 40px;
  }
  .xinxi {
    padding: 0 10px;
    background-color: white;
    > p {
      font-size: 15px;
      line-height: 60px;
      color: rgb(56, 56, 56);
    }
    .xl {
      position: relative;
      border-bottom: 1px solid #ccc;
      padding-bottom: 20px;
      > p {
        color: red;
        font-size: 18px;
        margin-bottom: 5px;
      }
      span:nth-of-type(1) {
        text-decoration: line-through;
        font-size: 13px;
        color: rgb(100, 100, 100);
        margin-right: 10px;
      }
      span:nth-of-type(2) {
        font-size: 13px;
        color: rgb(100, 100, 100);
      }
      .i {
        position: absolute;
        top: 0;
        right: 0;
        i {
          color: rgb(100, 100, 100);
          font-size: 30px;
        }
        p {
          color: rgb(100, 100, 100);
          font-size: 14px;
        }
      }
    }
    .baozhang {
      line-height: 60px;
      i {
        color: rgb(12, 238, 12);
        font-size: 20px;
      }
      span {
        font-size: 14px;
        color: rgb(100, 100, 100);
        padding: 0 20px 0 5px;
      }
    }
  }
  .guige {
    margin-top: 10px;
    background-color: white;
    position: relative;
    display: flex;
    line-height: 60px;
    padding: 0 10px;
    p {
      font-size: 16px;
      color: rgb(61, 61, 61);
    }
    span {
      font-size: 13px;
      margin-left: 10px;
      color: rgb(99, 99, 99);
    }
    i {
      position: absolute;
      right: 20px;
      color: rgb(99, 99, 99);
    }
  }
  .xiangqing {
    width: 100%;
    margin-top: 10px;
    background-color: white;
    p {
      width: 100%;
      text-align: center;
      line-height: 60px;
      color: red;
      font-size: 16px;
    }
    img {
      width: 100%;
    }
  }
  .tuijian {
    margin-bottom: 50px;
    > p {
      line-height: 50px;
      margin-top: 10px;
      font-size: 16px;
      text-align: center;
      color: rgb(143, 143, 143);
    }
    .shangpin {
      background-color: rgb(247, 247, 247);
      display: flex;
      flex-wrap: wrap;
      .box {
        width: 48%;
        margin: 1%;
        a {
          display: block;
          background-color: white;
          height: 270px;
          .img {
            width: 100%;
            height: 190px;
            overflow: hidden;
            img {
              width: 100%;
              min-width: 190px;
            }
          }
          p {
            font-size: 15px;
            height: 30px;
            padding: 10px;
            color: rgb(49, 49, 49);
          }
          .ys {
            position: relative;
            height: 25px;
            span:nth-child(1) {
              position: absolute;
              left: 10px;
              font-size: 15px;
              line-height: 25px;
              color: red;
            }
            span:nth-child(2) {
              position: absolute;
              right: 10px;
              font-size: 12px;
              line-height: 25px;
              color: rgb(143, 143, 143);
            }
          }
        }
      }
    }
  }
}
</style>
<script>
import banner2 from "@/components/banner2.vue";
import { mapState, mapMutations } from "vuex";
export default {
  name: "Commodity",
  components: {
    banner2,
  },
  data() {
    return {
      // 轮播展示图
      myimg: [],
      // 商品信息
      mysp: [],
      // 可选参数
      mykx: [],
      // 尾部推荐
      mytj: [],
      // 商品ID
      id: 0,
      // 规格ID
      i: 0,
      // 选中状态
      isfalse: false,
      // 数量
      sl: 1,
      // 颜色ID
      ysid: 0,
      // 提示
      ts: false,
    };
  },
  methods: {
    // 上一级
    goto() {
      this.$router.go(-1);
    },
    // 选规格
    myi(i) {
      this.i = i;
    },
    // 选颜色
    myys(i) {
      this.ysid = i;
    },
    // 关闭按钮
    gb() {
      this.isfalse = false;
    },
    // 显示按钮
    xx() {
      this.isfalse = true;
    },
    res() {
      if (this.sl <= 1) {
        this.sl = 1;
      } else {
        this.sl--;
      }
    },
    add() {
      this.sl++;
    },
    // 购物车
    gwc() {
      // 创建购物车订单
      if (!this.isfalse) {
        this.isfalse = true;
      } else {
        let obj = {};
        obj.id = this.mysp.id;
        obj.name = this.mysp.name;
        obj.img = this.myimg[this.i];
        if (this.mykx.gg.length > 0) {
          obj.gg = this.mykx.gg[this.i].name;
          obj.jg = this.mykx.gg[this.i].jg;
        } else {
          obj.jg = this.mysp.jg * this.sl;
        }
        if (this.mykx.ys.length > 0) {
          obj.ys = this.mykx.ys[this.ysid].name;
        }
        obj.sl = this.sl;
        obj.xz = false;
        this.$store.state.gouwuche.push(obj);
        this.isfalse = false;
        this.ts = true;
        let _this = this;
        let time = setTimeout(function () {
          _this.ts = false;
        }, 1000);
      }
    },
    // 购买
    gm() {
      if (!this.isfalse) {
        this.isfalse = true;
      } else {
        let obj = {};
        obj.id = this.mysp.id;
        obj.name = this.mysp.name;
        obj.img = this.myimg[this.i];
        if (this.mykx.gg.length > 0) {
          obj.gg = this.mykx.gg[this.i].name;
          obj.jg = this.mykx.gg[this.i].jg;
        } else {
          obj.jg = this.mysp.jg * this.sl;
        }
        if (this.mykx.ys.length > 0) {
          obj.ys = this.mykx.ys[this.ysid].name;
        }
        obj.fh='待付款'
        obj.sl = this.sl;
        obj.xz = false;
        this.$store.state.tijiaodd.push(obj);
        this.$store.state.dingdan.push(obj);
        this.isfalse = false;
        this.$router.push({ path: "/settlement" });
      }
    },
    ...mapMutations(["shoucang"]),
    ...mapMutations(["tijiao"]),
  },
  computed: {
    ...mapState(["img", "sp", "kx"]),
  },
  // 获取信息
  mounted() {
    let id = this.$route.query.id;
    this.id = this.$route.query.id;
    let cd = this.sp.length > 10 ? 10 : this.sp.length - 1;
    for (let i = 0; i < this.img.length; i++) {
      if (this.img[i].id == id) {
        this.myimg = this.img[i].img;
      }
    }
    for (let i = 0; i < this.sp.length; i++) {
      if (this.sp[i].id == id) {
        this.mysp = this.sp[i];
      }
    }
    for (let i = 0; i < this.kx.length; i++) {
      if (this.kx[i].id == id) {
        this.mykx = this.kx[i];
      }
    }
    for (let i = 0; i < cd; i++) {
      if (this.sp[i].lx == this.mysp.lx) {
        this.mytj.push(this.sp[i]);
      } else if (this.sp[i].fg == this.mysp.fg) {
        this.mytj.push(this.sp[i]);
      } else if (this.sp[i].wz == this.mysp.wz) {
        this.mytj.push(this.sp[i]);
      }
    }
  },
};
</script>